<html>
<head>
    <meta charset="utf-8">
    <title>
        AceDroidX's Tools
    </title>
    <link rel="stylesheet" href="./mdi/material-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118704626-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-118704626-1');
    </script>
    <style>
        .html {
            font-family: Noto Sans SC;
        }

        .v-card {
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app" class="hide-overflow" style="position: relative;height: 100%;">
        <v-navigation-drawer v-model="drawer" absolute temporary>
            <v-list>
                <v-list-tile avatar onclick="window.location.href='https://AceDroidX.github.io/?f=gp'">
                    <v-list-tile-avatar>
                        <img src="https://avatars.githubusercontent.com/u/15519693?s=100">
                    </v-list-tile-avatar>
                    <v-list-tile-content>
                        <v-list-tile-title>AceDroidX</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>
            <v-list dense>
                <v-divider></v-divider>
                <v-list-tile v-for="item in items" :key="item.id" @click=itemclick(item.id)>
                    <v-list-tile-action>
                        <v-icon>{{ item.icon }}</v-icon>
                    </v-list-tile-action>
                    <v-list-tile-content>
                        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>
        </v-navigation-drawer>
        <v-toolbar absolute scroll-off-screen scroll-target="#scrolling-techniques">
            <v-toolbar-side-icon v-on:click.stop="drawer = !drawer"></v-toolbar-side-icon>
            <v-toolbar-title>AceDroidX's Tools</v-toolbar-title>
            <!-- <v-spacer></v-spacer>
                <v-toolbar-items class="hidden-sm-and-down">
                    <v-btn flat>Link One</v-btn>
                    <v-btn flat>Link Two</v-btn>
                    <v-btn flat>Link Three</v-btn>
                </v-toolbar-items> -->
        </v-toolbar>
        <div id="scrolling-techniques" class="scroll-y" style="max-height: 100%;">
            <div style="margin:100px"></div>
            <v-layout column>
                <v-card v-for="card in cards" v-bind:key=card.id>
                    <v-card-title primary-title>
                        <div>
                            <div class="headline">{{card.title}}</div>
                            <v-text-field v-bind:label=card.text v-model=card.input v-on:keyup=keyup(card.id)></v-text-field>
                        </div>
                    </v-card-title>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn flat v-on:click=click(card.id)>GO</v-btn>
                    </v-card-actions>
                </v-card>
            </v-layout>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                drawer: null,
                items: [
                    { id: 0, title: 'Home', icon: 'dashboard', link: "https://AceDroidX.github.io/?f=gp" },
                    { id: 1, title: 'About', icon: 'question_answer', link: "https://AceDroidX.github.io/about?f=gp" }
                ],
                cards: [
                    { id: 0, title: "bilibili视频av号跳转", text: "输入av号", input: "" },
                    { id: 1, title: "pixiv图片id跳转", text: "输入图片id", input: "" },
                    { id: 2, title: "pixiv画师id跳转", text: "输入画师id", input: "" }
                ]
            },
            methods: {
                click: function (id) {
                    var input = this.cards[id].input
                    var flink
                    if (id == 0) {
                        flink = "https://www.bilibili.com/video/av"
                        input = input.replace(/av/i, "")
                    } else if (id == 1) {
                        flink = "https://www.pixiv.net/member_illust.php?mode=medium&illust_id="
                    } else if (id == 2) {
                        flink = "http://www.pixiv.net/member.php?id="
                    }
                    console.log(flink + input)
                    window.open(flink + input)
                    this.cards[id].input = ""
                },
                keyup: function (id) {
                    if (event.keyCode == 13) this.click(id)
                },
                itemclick: function (id) {
                    window.open(this.items[id].link)
                }
            }
        })
    </script>
</body>
</html>